<script setup>
import { ref } from "vue";
import { MdPreview, MdCatalog } from "md-editor-v3";
import "md-editor-v3/lib/preview.css";
import { useRoute } from "vue-router";
import api from "@/http/api";
import { API_BLOG_MD_SLUG } from "@/http/url";

const commentRef = ref();

const route = useRoute();

const id = "preview-only";
const scrollElement = document.documentElement;
const md = ref({
  md: "",
});
const type = ref({});
const user = ref({});

function loadMd() {
  api
    .get(API_BLOG_MD_SLUG(route.params.id))
    .then((res) => {
      if (res.ok) {
        md.value = res.data.md ?? {
          md: "",
        };
        type.value = res.data.type ?? {};
        user.value = res.data.user ?? {};
        nextTick(() => {
          commentRef.value && commentRef.value.loadComments();
          document.title = md.value.title;
        });
      } else {
        ElMessage.warning(res.message);
      }
    })
    .catch((e) => {
      ElMessage.error(e.message);
    });
}

onMounted(() => {
  console.log("post onMounted .... ");
  loadMd();
});
</script>

<template>
  <div class="post-page container">
    <div class="post-view">
      <div class="post-container">
        <h1 class="title">{{ md?.title || "" }}</h1>
        <div class="sub">
          <div class="left">
            <time :datetime="md.createTime">{{ md.createTime }}</time>
            <div class="see">
              <svg
                data-v-3f4438ce=""
                width="16"
                height="16"
                viewBox="0 0 16 16"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                class="view-icon"
              >
                <path
                  data-v-3f4438ce=""
                  d="M7.90078 2.80078C4.49278 2.80078 1.74745 6.11672 0.800781 7.77469C1.74745 9.58339 4.49278 13.2008 7.90078 13.2008C11.3088 13.2008 14.0541 9.58339 15.0008 7.77469C14.0541 6.11672 11.3088 2.80078 7.90078 2.80078Z"
                  stroke="currentColor"
                ></path>
                <circle
                  data-v-3f4438ce=""
                  cx="7.89922"
                  cy="8.00078"
                  r="2.2"
                  stroke="currentColor"
                ></circle>
              </svg>
              <div class="num">
                {{ md.views }}
              </div>
            </div>
            <div class="see">
              <svg
                t="1698478079468"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1645"
                width="16"
                height="16"
              >
                <path
                  d="M418.133333 298.666667l-42.666666-42.666667H213.333333v512h640V298.666667H418.133333zM896 298.666667v512H170.666667V213.333333h226.133333l42.666667 42.666667H896v42.666667z m-298.666667 341.333333h170.666667v42.666667h-170.666667v-42.666667z"
                  fill="#444444"
                  p-id="1646"
                ></path>
              </svg>
              <div class="type">
                {{ type?.title }}
              </div>
            </div>
          </div>
          <div class="tags">
            <template
              v-for="(it, index) in (md.tags || '').split(',')"
              :key="index"
            >
              <span v-if="it" class="tag">
                {{ it }}
              </span>
            </template>
          </div>
        </div>
        <MdPreview :editorId="id" :modelValue="md.md" />
      </div>
      <Comments v-if="md.allowComment == '1'" :aid="md?.id" ref="commentRef" />
      <div v-else class="comment"> 不允许评论 </div>
    </div>
    <div class="right-part">
      <div class="user-box">
        <img class="head" :src="user.head" :alt="`${user.name}的头像`" />
        <div class="name">{{ user.name }}</div>
      </div>
      <div class="toc-box">
        <div class="header">目录</div>
        <div class="con">
          <MdCatalog
            :editorId="id"
            :scrollElementOffsetTop="100"
            :scrollElement="scrollElement"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.post-page {
  display: flex;
  gap: 16px;
  padding-top: 16px;
  .post-view {
    flex: 1 1 auto;
  }
  .post-container {
    background-color: #fff;
    padding: 32px;
    margin-bottom: 16px;
    .title {
      margin-bottom: 16px;
    }

    .sub {
      font-size: 13px;
      line-height: 20px;
      color: #8a919f;
      flex-shrink: 0;

      display: flex;
      align-items: center;
      justify-content: space-between;
      .left {
        display: flex;
        gap: 16px;

        .see {
          display: flex;
          align-items: center;
          gap: 8px;
        }
      }
      .tags {
        display: flex;
        align-items: center;
        gap: 6px;
        .tag {
          background-color: #f2f3f5;
          padding: 0 6px;
          border-radius: 2px;
          max-width: 76px;
          box-sizing: border-box;
          margin-left: 6px;
          color: #8a919f;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          min-height: 18px;
          line-height: 18px;
        }
      }
    }
  }

  .right-part {
    width: 300px;
    .user-box {
      width: 300px;
      display: flex;
      align-items: center;
      flex-shrink: 0;
      background-color: #fff;
      box-sizing: border-box;
      padding: 16px;
      gap: 16px;
      margin-bottom: 16px;
      max-height: 76px;
      overflow-x: hidden;
      position: sticky;
      top: calc(60px + 16px);
      .head {
        width: 44px;
        height: 44px;
      }
      .name {
        font-weight: bold;
        font-size: 22px;
      }
    }
    .toc-box {
      box-sizing: border-box;
      width: 300px;
      height: fit-content;
      border-radius: 4px;
      background-color: #fff;
      max-height: calc(100vh - 88px);
      overflow-x: hidden;
      position: sticky;
      top: calc(60px + 32px + 76px);
      padding: 0 16px 16px 16px;
      .header {
        border-bottom: 1px solid #e4e6eb;
        font-size: 20px;
        font-weight: bold;
        padding: 16px 0;
      }
      .con {
        margin: 12px 4px 0 0;
        max-height: 312px;
        overflow-y: scroll;
      }
      :deep() {
        .md-editor-catalog-link {
          font-size: 16px;
          padding: 4px 8px 8px 8px;
        }
        .md-editor-catalog-link > span:hover,
        .md-editor-catalog-active > span {
          color: #1e80ff;
        }
      }
    }
  }
}
.comment {
  background-color: #fff;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  padding: 16px;

}
</style>
